<template>
  <div>
    <h1>实验场</h1>
    <h3>上传文件</h3>
    <div class="progress" @click="upform"
      :style="{backgroundImage:'linear-gradient(to right,#C0C7CB 0%,#C0C7CB '+progress+',#E1E6E9 '+progress+',#E1E6E9 100%)'}">
      123
    </div>
    <van-uploader v-model="fileList" :after-read="afterRead" />
    <!-- <button @click="upform">提交</button> -->
    <div>上传
      <upfiles />
    </div>
    
  </div>
</template>
<script>
import {uploadFile, reqTest} from '@/api/index'
import upfiles from './upLoadFile/upImg'
import axios from 'axios'
export default {
  data () {
    return {
      fileList:[],
      progress: ''
    }
  },
  mounted() {
    reqTest()
  },
  components:{
    upfiles
  },
  methods: {
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);
      console.log(file);
      
      let formData = new FormData();
      formData.append('img',file.file);   
      this.upImg(formData)
    },
    async upImg (file) {
      // const res = await axios.post('/api/upload/img',file)
      //const res = await uploadFile(file)
      // const res = await uploadFile(file)
      // if(res.status === 200) {
      //   console.log(res)
      //   this.$toast(res.msg)  
      // }else{
      //   this.$toast(res.msg)  
      // }
      // var config = {
      //   onUploadProgress: progressEvent => {
      //     var complete = (progressEvent.loaded / progressEvent.total * 100 | 0) + '%'
      //     this.progress = complete
      //   }
      // }
      // axios.post('/api/upload/img',
      //   file, config).then((res) => {
      //     if (res.status === 'success') {
      //       console.log('上传成功')
      //   }
      // })
    },
    async getUpload() {
      const res = await upload()
    },
    async upform () {
      const res = await reqUptest({
        user:'123456',
        password: '00000000'
      })
      if(res.code ===0){
        console.log(res.data);
        
      }
    },
    changeDemo(){
      this.demo1 = 100
    }
  },
};
</script>
<style scoped>

</style>